<template>
  <div>
    <div>
      <el-dialog title="添加管理员" :visible.sync="dialogAddVisible" :close-on-click-modal="false">
        <el-form ref="addForm" :model="addForm" :rules="rules">
          <el-form-item label="姓名" prop="Name">
            <el-input v-model="addForm.Name" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="Account">
            <el-input v-model="addForm.Account" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="handleAddCancel">取 消</el-button>
          <el-button type="primary" @click="handleAddConfirm">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="提示" :visible.sync="dialogDeleteVisible" :close-on-click-modal="false">
        <span>是否删除该管理员</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleDeleteCancel">取 消</el-button>
          <el-button type="primary" @click="handleDeleteConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    
    <wrap v-loading="tableLoading">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="handleAddOpen">添加管理员</el-button>
      <el-table
        :data="tableDataPart"
        style="width: 100%">
        <el-table-column
          prop="Name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="Account"
          label="账号">
        </el-table-column>
        <el-table-column
          prop="Create_time"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="Update_time"
          label="更新时间">
        </el-table-column>
        <el-table-column
          width="200"
          label="操作">
          <template v-slot="scope">
            <el-button
              size="small"
              type="danger"
              plain
              icon="el-icon-delete"
              @click="handleDeleteOpen(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </wrap>
  </div>  
</template>

<script>
import Wrap from '@/components/Wrap'
import { deepClone } from '@/utils/index'
import { managerGet, managerAdd, managerDelete, managerEdit } from '@/api/manager'
export default {
  components: {
    Wrap
  },
  data() {
    return {
      dialogAddVisible: false,
      dialogDeleteVisible: false,
      deleteIndex: 0,
      currentPage: 1,
      pagesize: 10,
      tableData: [],
      tableDataCopy: [],
      tableLoading: true,
      rules: {
        Name: [
          { required: true, message: '请输入管理员姓名' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
        ],
        Account: [
          { required: true, message: '请输入管理员账号' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
        ]
      },
      addForm: {
        Name: '',
        Account: ''
      }
    }
  },
  computed: {
    tableDataPart() {
      return this.tableData.slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize)
    }
  },
  mounted() {
    this.loadAll()
  },
  methods: {
    loadAll() {
      managerGet({}).then(res => {
        this.tableData = res.data
        this.tableDataCopy = deepClone(res.data)
        this.tableLoading = false
      }).catch(err => {
        this.tableLoading = false
      })
    },
    handleSizeChange(val) {
      this.pagesize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleAddOpen() {
      this.dialogAddVisible = true
    },
    handleDeleteOpen(index, row) {
      this.deleteIndex = index
      this.dialogDeleteVisible = true
    },
    handleAddConfirm() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.tableLoading = true
          managerAdd(this.addForm).then(res => {
            this.tableData.unshift(res.data)
            this.dialogAddVisible = false
            this.tableLoading = false
          }).catch(err => {
            this.tableLoading = false
          })
        }
      })
    },
    handleAddCancel() {
      this.dialogAddVisible = false
    },
    handleDeleteConfirm() {
      this.tableLoading = true
      managerDelete({
        id: this.tableData[this.deleteIndex].Id
      }).then(res => {
        this.tableData.splice(this.deleteIndex, 1)
        this.dialogDeleteVisible = false
        this.tableLoading = false
      }).catch(err => {
        this.tableLoading = false
      })
    },
    handleDeleteCancel() {
      this.dialogDeleteVisible = false
    },
    handleEditCancel() {
      this.dialogEditVisible = false
    }
  }
}
</script>

<style scoped>

</style>
